<template>
  <div>
    <div>
      <el-dialog
        class="my_dialog"
        v-bind="$attrs"
        v-on="$listeners"
        v-draggable
        width="600px"
        :visible="visible"
        @open="onOpen"
        @close="onClose"
        :title="title"
        :close-on-click-modal="false"
      >
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-form-item label="单据名称" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入单据名称"
              clearable
              :style="{ width: '100%' }"
              @focus="dialogTableVisible"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="单据编码" prop="code">
            <el-input
              v-model="formData.code"
              placeholder="请输入单据编码"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="单据前缀" prop="prefix">
            <el-input
              v-model="formData.prefix"
              placeholder="请输入单据前缀"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="流水位数" prop="digit">
            <el-input-number
              v-model="formData.digit"
              placeholder="流水位数"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="onClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog
        class="my_dialog"
        title="订单类型"
        :visible.sync="dialogTable"
        width="600px"
        v-draggable
      >
        <el-table :data="billTypeList">
          <el-table-column
            property="billType"
            label="类型名称"
            width="150"
          ></el-table-column>
          <el-table-column
            property="inOutFlagText"
            label="出入库标识"
            width="200"
          ></el-table-column>
        </el-table>
        <pagination
          v-show="total >= 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :page-sizes="[20, 50, 100, 500]"
          :page-size="20"
          @pagination="getBillTypeList"
        />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
export default {
  inheritAttrs: false,
  components: {},
  props: ["title", "visible", "item"],
  data() {
    return {
      formData: {
        name: "",
        code: "",
        prefix: "",
        digit: 1,
        thisNumber: 1,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入单据名称",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入单据编码",
            trigger: "blur",
          },
        ],
        prefix: [
          {
            required: true,
            message: "请输入单据前缀",
            trigger: "blur",
          },
        ],
        digit: [
          {
            required: true,
            message: "流水位数",
            trigger: "blur",
          },
        ],
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogTable: false,
      billTypeList: [],
      total: 0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getDictText() {
      this.$nextTick(() => {
        if (this.item) {
          this.formData = JSON.parse(JSON.stringify(this.item));
        }
      });
    },
    // 获取订单类型数据
    getBillTypeList() {
      request({
        url: "/basic/bill_rule/getBillTypeList",
        method: "get",
        params: this.queryParams,
      }).then((res) => {
        console.log(res.data);
        this.billTypeList = res.data.rows;
        this.total = res.data.rows.total;
      });
    },
    dialogTableVisible() {
      this.getBillTypeList();
      this.dialogTable == true;
    },
    onOpen() {
      this.getDictText();
    },
    onClose() {
      this.$refs["elForm"].resetFields();
      this.close();
    },
    close() {
      this.$emit("update:visible", false);
    },
    handleConfirm() {
      let form = JSON.parse(JSON.stringify(this.formData));
      console.log(form);
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        this.$emit("Ok", form);
        this.close();
      });
    },
  },
};
</script>
<style>
</style>
